import React from 'react'
import My from './components/My'
import Find from './components/Find'
import NotFount from './components/NotFount'
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'
import './style/index.css'
export default class App extends React.Component {
  state = {
    currentHash: ''
  }
  componentDidMount() {
    window.onhashchange = () => {
      console.log(111);
    }
  }
  render() {
    return (
      <div>
        <h2>伪网易云音乐</h2>
        <button onClick={this.MyMusice}>我的音乐</button>
        <button onClick={this.FindMusice}>发现音乐</button>
        {/* {this.state.currentHash === '/My' ? <My></My> : ''}
        {this.state.currentHash === '/Find' ? <Find></Find> : ''} */}
        <Router>
          <Link to='/Find'>link 发现 test</Link>
          <Link to='/my'>link 我的 test</Link>
          {/* <NavLink to='/my'>NavLink 我的 test </NavLink> */}
          <h4>--------分割--------</h4>
          <Route path='/my' component={My}>
          </Route>
          <Switch>
            <Route path='/find' component={Find}></Route>
            <Route path='/find' component={Find}></Route>
            <Route path='/find' component={Find}></Route>
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    )
  }
  MyMusice = () => {
    window.location.hash = "/My"
  }
  FindMusice = () => {
    window.location.hash = "/Find"
  }

}
